import '@/App.scss';
import { Suspense } from 'react';
import { useLocation, useNavigate, useRoutes } from 'react-router-dom';
import { route } from './router/Route';
import { Badge, TabBar, } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

function App() {
  let arr = ['/home']
  let location = useLocation()
  let navigate = useNavigate()
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/car',
      title: '购物车',
      icon: <UnorderedListOutline />,
    },
    {
      key: localStorage.getItem('token')?'/my' : '/login',
      title: localStorage.getItem('token')?'我的' : '登录',
      icon: <UserOutline />,
    },
  ]
  return (
    <div className="App">
      <Suspense fallback={<div>loading...</div>}></Suspense>    
      {useRoutes(route)}  
      {arr.indexOf(location.pathname) != -1 && <TabBar className='nav' activeKey={location.pathname} onChange={(value) => navigate(value)}>
        {tabs.map(item => (
            <TabBar.Item
              key={item.key}
              icon={item.icon}
              title={item.title}
            />
          ))}
        </TabBar>}
    </div>
  );
}

export default App;
